/*
 * @Author: liyongxuan
 * @Date: 2018-1-10 10:37:42
 * @Last Modified by: liyongxuan
 * @Last Modified time: 2018-1-10 10:37:42
 * @description：项目管理-拟投资-项目详情头部-项目组成员组件
 */
<template>
    <div>
        <div class="ca-title">
            <h3>项目组成员（历史记录）：</h3>
        </div>
        <el-form ref="dataForm">
            <table class="ca-table ca-m-t-15 ca-tale-th-pad">
                <tr >
                    <th width="75%">项目成员</th>
                    <th width="20%">时间</th>
                    <th width="5%" class="p-tb-0">
                        <button type="button" class="ca-btn ca-btn-round" @click="addData">
                            <i class="fa fa-plus"></i>
                        </button>
                    </th>
                </tr>
                <tr v-for="(item,index) in value" :key="index" v-if="item.type==2">
                    <td>
                        <el-select v-model="item.userId" multiple placeholder="请选择" class="w-100">
                            <el-option v-for="(item,index) in userList" :key="index" :label="item.userName" :value="item.id">
                            </el-option>
                        </el-select>
                    </td>
                    <td >
                        <el-date-picker v-model="item.groupDate" type="datetime" placeholder="选择日期"></el-date-picker>
                    </td>
                    <td class="p-tb-0">
                        <button type="button" class="ca-btn ca-btn-round" @click="delData(index)">
                            <i class="fa fa-times"></i>
                        </button>
                    </td>
                </tr>
            </table>
        </el-form>
    </div>
</template>

<script type="text/ecmascript-6">

export default {
    data() {
        return {
            proTeamList: []
        }
    },
    watch: {
        // 深度 watcher
        value: {
            handler: function (val) {
                this.$emit('input', val);
            },
            deep: true
        }
    },
    props: {
        value: {
            type: Array,
            default: function () {
                return []
            }
        },
        userList: {
            type: Array,
            default: function () {
                return []
            }
        }
    },
    methods: {
        //添加成员
        addData() {
            let newData = {
                groupDate: new Date(),
                type: 2,
                userId: ''
            }
            this.value.push(Object.assign({}, newData))
        },
        //删除成员
        delData(index) {
            this.$confirm('是否删除?', '提示', {
                cancelButtonText: '取消',
                confirmButtonText: '确定',
                type: 'warning'
            }).then(() => {
                this.value.splice(index, 1)
            })
        }
    },
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.w-100{
    width: 100%;
}
.ca-tale-th-pad th {
    padding: 0px
}
</style>
<style>
    .el-tag--info{
        display: inline-block;
    }
</style>

